<template>
  <div class="app-content">
    <div class="flex justify-between items-center">
      <el-form :inline="true" :model="searchData">
        <el-form-item label="管理员名称">
          <el-input v-model="searchData.name" clearable placeholder="管理员名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="onMenuForm()">新增</el-button>
      </div>
    </div>
    <div class="mt-5">
      <el-table
        v-loading="loading"
        :data="dkTableData"
        row-key="id"
        stripe
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="menu_name" label="菜单/接口名称" min-width="200">
          <template #default="{ row }">
            <span><dk-icon :icon="row.icon" class="mr1" />{{ row.menu_name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="menu_name" label="类型" min-width="200">
          <template #default="{ row }">
            <el-tag v-if="row.menu_type === 1" type="success">菜单</el-tag>
            <el-tag v-else-if="row.menu_type === 2" type="warning">接口</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="api_url" label="接口路径" min-width="150">
          <template #default="{ row }">
            <span>{{ row.methods ? '[' + row.methods + ']  ' + row.api_url : row.api_url }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="menu_path" label="路由地址" min-width="140" />
        <el-table-column label="是否显示" min-width="80">
          <template #default="{ row }">
            <el-switch v-model="row.is_show" :active-value="1" :inactive-value="0" />
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" min-width="70" />
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="onMenuForm(0, row.id)">
              <el-icon><Plus /></el-icon>
            </el-button>
            <el-button size="small" type="primary" @click="onMenuForm(row.id)">
              <el-icon><Edit /></el-icon>
            </el-button>
            <el-popconfirm title="删除后无法恢复，确定要删除？" class="ml-1" @confirm="onDeleteUser(row.id)">
              <template #reference>
                <el-button size="small" type="danger">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <dk-menu-form ref="dkMenuFormRef" :form-data="formData" :form-title="formTitle" />
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { getMenuIndex, getMenu, deleteMenu } from '@/api/system/menu'
import DkMenuForm from './components/DkMenuForm/index.vue'
import mitt from '@/utils/mitt'

// 状态
const loading = ref(true)
const dkTableData = ref([])
const searchData = ref({
  name: ''
})

const formData = ref({
  menu_type: 1,
  menu_name: '',
  menu_path: '',
  auth_mark: '',
  api_url: '',
  methods: ''
})

const formTitle = ref('')
const dkMenuFormRef = ref(null)

// 递归删除菜单
const deleteMenuByRow = (id, data) => {
  for (let i = 0; i < data.length; i++) {
    if (id === data[i].id) {
      data.splice(i, 1)
      return
    }

    if (data[i].children) {
      deleteMenuByRow(id, data[i].children)
    }
  }
}

// 删除菜单
const onDeleteUser = (id) => {
  deleteMenu(id)
    .then((res) => {
      ElMessage.success(res.msg)
      getList()
      deleteMenuByRow(id, dkTableData.value)
      mitt.emit('getMenus')
    })
    .catch((err) => {
      console.log(err)
    })
}

// 表单处理
const onMenuForm = (id = 0, pid = 0) => {
  if (id) {
    getMenu(id)
      .then((res) => {
        formData.value = res.data
        formTitle.value = '编辑'
        dkMenuFormRef.value.dialogVisible = true
      })
      .catch(() => {})
  } else {
    // 完全重置表单数据
    formData.value = {
      menu_type: 1,
      menu_name: '',
      menu_path: '',
      auth_mark: '',
      api_url: '',
      methods: '',
      icon: '',
      sort: '',
      is_show: 1,
      is_show_path: 0,
      pid: 0
    }

    formTitle.value = '新增'

    if (pid) {
      formTitle.value = '新增节点'
      formData.value.pid = pid
    }

    // 先重置表单再显示
    // dkMenuFormRef.value.resetForm()
    dkMenuFormRef.value.dialogVisible = true
  }
}

// 搜索
const onSearch = () => {
  getList(1)
}

// 分页切换
const currentChange = (page) => {
  getList(page)
}

// 获取列表数据
const getList = (page) => {
  getMenuIndex().then((res) => {
    dkTableData.value = res.data
    loading.value = false
  })
}

// 监听mitt事件
const onGetMenus = () => {
  console.log('111')
  getList()
}

// 初始化
onMounted(() => {
  getList()
  mitt.on('getMenus', onGetMenus)
})

// 卸载前移除事件监听
onBeforeUnmount(() => {
  mitt.off('getMenus', onGetMenus)
})
</script>
